<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title></title>
</head>
<body>
<div th:fragment="pzcurmainDetailInfo">
    <form id="pzcurmainDetailInfo_Form">
        <input id="pzcurmainDetailInfo_mainId" name="mainId" type="hidden"/>
        <input id="pzcurmainDetailInfo_applyType" name="applyType" type="hidden"/>
        <input id="pzcurmainDetailInfo_state" name="state" type="hidden"/>
        <input id="pzcurmainDetailInfo_applyCode" name="applyCode" type="hidden"/>
        <div class="row">
            <div class="col-md-8">
                <div class="form-group">
                    <label>标题<small></small></label>
                    <input type="text" class="form-control" placeholder="" id="pzcurmainDetailInfo_title" name="title">
                </div>
            </div>
            <div class="col-md-4">
                <div class="form-group">
                    <label>提单日期</label>
                    <input type="text" id="pzcurmainDetailInfo_applyDate" name="applyDate" class="form-control"
                           readonly>
                </div>
            </div>
            <div class="col-md-4">
                <div class="form-group">
                    <label for="pzcurmainDetailInfo_spendingType">经费类型
                        <i class="fa fa-question-circle text-warning" data-toggle="tooltip" data-placement="right"
                           title="驳回的单据不能修改经费类型"></i>
                    </label>
                    <select id="pzcurmainDetailInfo_spendingType" name="spendingType" data-title="请选择经费类型"
                            class="form-control m-b">
                        <!--<c:if test="${main.piId!=null }">
                            disabled="disabled"
                        </c:if>-->
                        >
                        <!--<c:if test="${teacher.deptCode=='10900' }">
                            <option value="5">提现</option>
                        </c:if>-->
                    </select>
                </div>
            </div>
            <div class="col-md-4">
                <div class="form-group">
                    <label for="pzcurmainDetailInfo_level">重要程度</label>
                    <select id="pzcurmainDetailInfo_level" name="level" class="form-control m-b"></select>
                </div>
            </div>
            <div class="col-md-4">
                <div class="form-group">
                    <label>提单人</label>
                    <input type="text" id="pzcurmainDetailInfo_applyUserName" name="applyUserName" class="form-control"
                           readonly>
                </div>
            </div>
            <div class="col-md-4">
                <div class="form-group">
                    <label>预算部门</label>
                    <select id="pzcurmainDetailInfo_applyDeptCode" name="applyDeptCode"
                            class="form-control m-b"></select>
                </div>
            </div>
            <div class="col-md-4">
                <div class="form-group">
                    <label>经办人</label>
                    <input id="pzcurmainDetailInfo_agentUsers" name="agentUsers" type="text" class="form-control"
                           placeholder="请输入经办人，多个以','号分隔">
                </div>
            </div>
            <div class="col-md-4">
                <div class="form-group">
                    <label>金额
                        <i class="fa fa-question-circle text-warning" data-toggle="tooltip" data-placement="right"
                           title="驳回的单据不能修改金额"></i>
                    </label>
                    <input id="pzcurmainDetailInfo_money" name="money" type="text" class="form-control"
                           placeholder="请输入申请金额">
                    <!--<c:if test="${main.piId!=null }">
                        readonly="readonly"
                    </c:if>-->
                </div>
            </div>
            <div class="col-md-4" th:if="${dKey!='spending'}">
                <div class="form-group">
                    <label for="pzcurmainDetailInfo_expenseWay">报销方式</label>
                    <select id="pzcurmainDetailInfo_expenseWay" name="expenseWay" class="form-control m-b"></select>
                </div>
            </div>
            <div class="col-md-4" th:if="${dKey!='spending'}">
                <div class="form-group">
                    <label>票据总数</label>
                    <input id="pzcurmainDetailInfo_paperNum" name="paperNum" type="text" class="form-control"
                           placeholder="请输入票据总数"/>
                </div>
            </div>
            <div class="col-md-12">
                <div class="form-group">
                    <label>事由</label>
                    <textarea id="pzcurmainDetailInfo_reason" name="reason" rows="3" class="form-control"></textarea>
                </div>
            </div>
        </div>
    </form>
    <script type="text/javascript">
        $(function () {
            $('[data-toggle="tooltip"]').tooltip()
            $('#pzcurmainDetailInfo_spendingType').change(function (e) {
                if ($(this).val() == 2 && pzcurmainDetailObj.applyType == 'spending') {
                    pzcurmainDetailObj.tripToggle(true);
                } else {
                    pzcurmainDetailObj.tripToggle(false);
                }
            });
        })
        var pzcurmainDetailInfoObj = new Object({
            dataRule_spending: {
                title: {
                    required: true,
                    maxlength: 30
                },
                spendingType: {
                    required: true
                },
                agentUsers: {
                    required: true,
                    maxlength: 500
                },
                money: {
                    required: true,
                    number: true,
                    min: 0.01,
                    toDecimal2: true
                },
                reason: {
                    required: true,
                    maxlength: 3000
                }
            },
            dataRule_expense: {
                title: {
                    required: true,
                    maxlength: 30
                },
                spendingType: {
                    required: true
                },
                agentUsers: {
                    required: true,
                    maxlength: 500
                },
                money: {
                    required: true,
                    number: true,
                    min: 0.01,
                    toDecimal2: true
                },
                reason: {
                    required: true,
                    maxlength: 3000
                },
                expenseWay: {
                    required: true
                },
                paperNum: {
                    required: true
                }
            },
            applyType: undefined,
            myValidator: undefined,
            init: function (data = {}, dataSelect) {
                pzcurmainDetailInfoObj.applyType = data.pzMainVO.applyType;
                $('#pzcurmainDetailInfo_applyDeptCode').empty()
                $('#pzcurmainDetailInfo_level').empty()
                $('#pzcurmainDetailInfo_spendingType').empty()
                $('#pzcurmainDetailInfo_expenseWay').empty()
                if (pzcurmainDetailInfoObj.applyType == 'spending') {
                    pzcurmainDetailInfoObj.myValidator = $('#pzcurmainDetailInfo_Form').validate({
                        rules: pzcurmainDetailInfoObj.dataRule_spending,
                        submitHandler: function (form) {
                            pzcurmainDetailInfoObj.dataFormSubmit(form);
                        }
                    });
                } else {
                    dataSelect.expenseWays.map(o => {
                        $('#pzcurmainDetailInfo_expenseWay').append($(`<option value="${o.value}">${o.text}</option>`))
                    })
                    if (pzcurmainDetailInfoObj.applyType == 'expense') {
                        pzcurmainDetailInfoObj.myValidator = $('#pzcurmainDetailInfo_Form').validate({
                            rules: pzcurmainDetailInfoObj.dataRule_expense,
                            submitHandler: function (form) {
                                pzcurmainDetailInfoObj.dataFormSubmit(form);
                            }
                        });
                    } else if (pzcurmainDetailInfoObj.applyType == 'repay') {
                        pzcurmainDetailInfoObj.myValidator = $('#pzcurmainDetailInfo_Form').validate({
                            rules: pzcurmainDetailInfoObj.dataRule_expense,
                            submitHandler: function (form) {
                                pzcurmainDetailInfoObj.dataFormSubmit(form);
                            }
                        });
                    }
                }
                dataSelect.depts.map(o => {
                    $('#pzcurmainDetailInfo_applyDeptCode').append($(`<option value="${o.deptCode}">${o.deptName}</option>`))
                })
                dataSelect.levels.map(o => {
                    $('#pzcurmainDetailInfo_level').append($(`<option value="${o.value}">${o.text}</option>`))
                })
                dataSelect.spendingTypes.map(o => {
                    $('#pzcurmainDetailInfo_spendingType').append($(`<option value="${o.value}">${o.text}</option>`))
                })
                pzcurmainDetailInfoObj.fillForm(data)
            },
            fillForm: function (data = {}) {
                $("#pzcurmainDetailInfo_Form")[0].reset();
                $("input[type='hidden']").val("");
                for (let i in data.pzMainVO) {
                    if ($("#pzcurmainDetailInfo_Form").find(`[name=${i}]`).length > 0) {
                        $("#pzcurmainDetailInfo_Form").find(`[name=${i}]`).val(data.pzMainVO[i])
                    }
                }
                if(pzcurmainDetailObj.applyType != 'spending'){
                    $("#pzcurmainDetailInfo_Form").find(`[name="expenseWay"]`).val(data.expenseWay);
                    $("#pzcurmainDetailInfo_Form").find(`[name="paperNum"]`).val(data.paperNum);
                }
                if (data.spendingType == 2 && pzcurmainDetailObj.applyType == 'spending') {
                    pzcurmainDetailObj.tripToggle(true);
                } else {
                    pzcurmainDetailObj.tripToggle(false);
                }
            },
            submitHandle: function(){
                $('#pzcurmainDetailInfo_Form').submit();
            },
            dataFormSubmit: function (form) {
                let formVals = $(form).serializeArray();
                let data = {}
                for (let i = 0; i < formVals.length; i++) {
                    data[formVals[i].name] = formVals[i].value;
                }
                $.myPost({
                    url: `/pz/cur/pzmain/saveApply/${pzcurmainDetailInfoObj.applyType}`,
                    dataType: 'json',
                    data: data,
                    success: function (data) {
                        if (data && data.code == 0) {
                            pzcurmainDetailObj.toggleBtn(true);
                            toastr.success(data.msg, '操作提示')
                        } else {
                            toastr.error(data.msg, '操作失败')
                        }
                    }
                })
            }
        });
    </script>
</div>
</body>
</html>